<template>
  <div class="safe-area-wrapper">
    <div class="safe-area-top"></div>
    <div class="safe-area-content">
      <slot></slot>
    </div>
    <div class="safe-area-bottom"></div>
  </div>
</template>

<script>
export default {
  name: "SafeAreaWrapper",
};
</script>

<style lang="less" scoped>
.safe-area-wrapper {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

.safe-area-top {
  height: 0;
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
  background-color: transparent;
}

.safe-area-content {
  flex: 1;
  overflow: hidden;
}

.safe-area-bottom {
  height: 0;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  background-color: transparent;
}

/* 兼容不支持 env() 的浏览器 */
@supports not (padding-top: env(safe-area-inset-top)) {
  .safe-area-top {
    padding-top: 20px; /* iOS 状态栏默认高度 */
  }
  
  .safe-area-bottom {
    padding-bottom: 34px; /* iOS 底部安全区域默认高度 */
  }
}

/* Android 设备特殊处理 */
@media screen and (max-width: 768px) {
  .safe-area-top {
    padding-top: max(constant(safe-area-inset-top), env(safe-area-inset-top), 24px);
  }
  
  .safe-area-bottom {
    padding-bottom: max(constant(safe-area-inset-bottom), env(safe-area-inset-bottom), 24px);
  }
}
</style> 